<template>
  <div id="drawer">
    <div id="drawer-top">
      <i @click="toPath('/personal')" class="el-icon-user"><span class="d-font">用户</span></i>
      <i @click="toPath('/personal/setting')" class="el-icon-setting"><span class="d-font">设置</span></i>
      <a  href=mailto:1203207252@qq.com title="反馈"> <i @click="toPath()" class="el-icon-s-promotion"><span class="d-font">反馈</span></i></a>

    </div>
  </div>
</template>

<script>
export default {
  name: "Drawer",
  methods:{
    toPath(path){
      this.$router.push(path)
    }
  }
}
</script>

<style lang="stylus" scoped>
#drawer
  transition all .15s ease-out
  height 91vh
  width 40px
  box-shadow 2px -2px 3px #e7dddd
  left 0
  position fixed
  bottom 0
  background white
  &:hover
    width 70px
  &:hover
    .d-font
      opacity 1
#drawer-top
  font-size 22px
  width 100%
  height 40%
  display flex
  flex-direction column
  align-items center
  justify-content space-around

  & i
    transition all .2s
    cursor pointer
    height 20%
    color #8d9192
    justify-content space-between
    display flex
    align-items center
    flex-direction column
    &:hover
      color black
.d-font
  font-size 16px
  opacity 0
  color black
</style>
